<template lang='pug'>
  div.pos-r
    RadioGroup(v-model="charge" style="display:block" @on-change="chargeChange")
      .card.mb-15.ivu-radio-wrapper.ivu-radio-group-item.ivu-radio-wrapper-checked.ivu-radio-default(v-if="isSb" @click="chargeChange('1')")
        span.ivu-radio(:class="charge == '1' ? 'ivu-radio-checked' : ''")
          span.ivu-radio-inner
        span 当月新增当月收费
      .card.mb-15.ivu-radio-wrapper.ivu-radio-group-item.ivu-radio-wrapper-checked.ivu-radio-default(v-if="isXinzi" @click="chargeChange('5')")
        span.ivu-radio(:class="charge == '5' ? 'ivu-radio-checked' : ''")
          span.ivu-radio-inner
        span 当月新增次月收费
      .card.mb-15.ivu-radio-wrapper.ivu-radio-group-item.ivu-radio-wrapper-checked.ivu-radio-default(v-if="isSb" @click="chargeChange('2')")
        span.ivu-radio(:class="charge == '2' ? 'ivu-radio-checked' : ''")
          span.ivu-radio-inner
        span
          | 预收：
          Input.input-has-border(v-model="advanceMonths" type="number" style="width:100px" :readonly="isQuarterStart")
          | 个月
        span.early-collection.ml-30 是否提前收取：
          i-switch(v-model="earlyCollection")
            span(slot="open") 是
            span(slot="close") 否
        span.early-collection.ml-30 是否按照四季划分：
          i-switch(v-model="isQuarterStart" @on-change="isQuarterStartChange")
            span(slot="open") 是
            span(slot="close") 否
        span.early-collection(v-if="isQuarterStart")
          span.ml-30 开始月份：
          Select.input-has-border(v-model="quarterStart"  placeholder="请选择"  style="width:100px")
            Option(v-for="(item, idx) in monthArr" :value="item.key" :key="idx") {{ item.value }}
          span.ml-30 中途变动是否出具账单：
            i-switch(v-model="isBuildBill" :true-value="1" :false-value="0")
              span(slot="open") 是
              span(slot="close") 否
</template>

<script>
import InsureProjectApi from '@/api/InsureProject.api.js'
export default {
  name:'',
  props:{
    isSb: Boolean,
    isXinzi: Boolean,
    formValidate: Object
  },
  data () {
    return {
      // 社保，公积金，商保，薪资部分
      type_1: ['1', '2', '4', '8'],
      earlyCollection: true, // 是否提前收取
      advanceMonths: 0, // 预收月份
      charge: '1', // 收费方式
      isQuarterStart: false,
      quarterStart: 0,
      isBuildBill: 0,
      monthArr: [
        {key: 1, value: '1月'},
        {key: 2, value: '2月'},
        {key: 3, value: '3月'},
        {key: 4, value: '4月'},
        {key: 5, value: '5月'},
        {key: 6, value: '6月'},
        {key: 7, value: '7月'},
        {key: 8, value: '8月'},
        {key: 9, value: '9月'},
        {key: 10, value: '10月'},
        {key: 11, value: '11月'},
        {key: 12, value: '12月'},
      ],
    }
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {
    chargeChange (val) {
      console.log(val)
      this.charge = val
    },
    submit () {
      InsureProjectApi.PostInsureProject({
        Category: this.formValidate.chargingType,
        Name: this.formValidate.name,
        Charge: this.charge,
        AdvanceMonths: this.advanceMonths,
        IsAhead: this.earlyCollection,
        QuarterStart: this.quarterStart,
        IsBuildBill: this.isBuildBill
      }).then(res => {
        if (res.data.success) {
          this.$Message.success(res.data.message)
          this.$emit('get-list')
          this.refreshData()
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },
    isQuarterStartChange (val) {
      if (val) {
        this.advanceMonths = 3
        this.quarterStart = 1
        this.isBuildBill = 1
      } else {
        this.advanceMonths = 0
        this.quarterStart = 0
        this.isBuildBill = 0
      }
    },
    // 重置数据
    refreshData () {
      Object.assign(this.$data, this.$options.data())
    }
  },

  watch: {
    'formValidate.chargingType': {
      handler(newVal, oldVal) {
        if (this.type_1.includes(newVal)) {
          this.earlyCollection = true // 是否提前收取
          this.advanceMonths = 0 // 预收月份
          this.charge = '1' // 收费方式
        }
      },
      immediate: true,
      deep: true
    }
  }

}

</script>
<style lang='less' scoped>
  .card{
    display: block;
    border: 1px solid #dcdee2;
    padding: 16px;
    border-radius: 4px;
  }
  .d-f-c{
    display: flex;
  }
  .pos-r{
    position: relative;
  }
  .has-line{
    position: relative;
    &:before{
      content: "";
      display: block;
      width: 100%;
      height: 1px;
      background: #eee;
      position: absolute;
      top: 12px;
      left: 0;
    }
    span{
      display: inline-block;
      background: #fff;
      padding: 0 5px 0 18px;
      position: relative;
      margin-left: 30px;
      font-size: 14px;
      color: red;
    }
    button{
      position: relative;
    }
  }
  .early-collection{
    display: inline-block;
  }
  .ratio-item{
    margin-top: 10px;
    span{
      display: inline-block;
      width: 60px;
    }
  }
</style>